import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '滑块组件',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        splashColor: Colors.transparent,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double _slideValue = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('滑块组件'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("当前值：$_slideValue"),
            SizedBox(
              height: 16.0,
            ),
            Slider(
              value: _slideValue,
              // 已选中颜色
              activeColor: Theme.of(context).accentColor,
              // 未选中颜色
              inactiveColor: Theme.of(context).accentColor.withOpacity(.3),
              min: 0,
              max: 10.0,
              // 将滑块分为10等分
              divisions: 10,
              // 拖动滑块顶部label显示的文本
              label: 'value:${_slideValue.toInt()}',
              onChanged: (value) {
                setState(() {
                  _slideValue = value;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}
